<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">

    <h:form id="formDespesas" >

        <p:panel header="DESPESAS" >

            <fieldset class="fieldset">
                
                <legend>PESQUISA</legend>

                <h:panelGrid columns="4" >

                    <h:panelGroup>

                        Data Inicial<br/>
                        <p:calendar size="15" 
                                    showOn="button" 
                                    locale="pt" 
                                    onkeypress="formatar(this, '##-##-####')" >
                            
                        </p:calendar>

                    </h:panelGroup>

                    <h:panelGroup>

                        Data Final<br/>
                        <p:calendar size="15" 
                                    showOn="button" 
                                    locale="pt" 
                                    onkeypress="formatar(this, '##-##-####')"> 

                        </p:calendar>


                    </h:panelGroup>

                    <h:panelGroup>

                        <br/>
                        <p:commandButton value="Pesquisar" 
                                         />

                    </h:panelGroup>

                    <h:panelGroup>

                        <br/>
                        <p:commandButton value="Mostrar Tudo" 
                                         />

                    </h:panelGroup>

                </h:panelGrid>

            </fieldset>

            <br/>

            <p:commandButton icon="ui-icon-plus"   
                             value="Novo" 
                             actionListener="#{despesaBean.prepareCreate}" 
                             update=":formDespesa"
                             oncomplete="dialogDespesa.show()"
                             />

            <br/><br/>

            <p:dataTable id="dtDespesas"
                         var="item" 
                         value="#{despesaBean.items}" 
                         emptyMessage="Não há despesas cadastradas" 
                         rowKey="#{item.id}" paginator="true" 
                         rows="10"  
                         rowsPerPageTemplate="5,10,15,20,25,30,35,40,45,50">

                <p:column headerText="Descrição" > 

                    <h:outputText value="#{item.descricao}" />

                </p:column>  

                <p:column headerText="Valor" > 

                    <h:outputText value="#{item.valor}" >

                        <f:convertNumber currencySymbol="R$"
                                         type="currency"
                                         locale="pt"/>

                    </h:outputText>

                </p:column>  

                <p:column headerText="Data" > 

                    <h:outputText value="#{item.dataDespesa}" >

                        <f:convertDateTime pattern="dd/MM/yyyy" />

                    </h:outputText>

                </p:column>  

                <p:column headerText="Opções" 
                          style="width: 80px; text-align: center "> 

                    <p:commandButton icon="ui-icon-pencil"   
                                     title="editar despesa" 
                                     update=":formDespesa"
                                     oncomplete="dialogDespesa.show()" > 

                        <f:setPropertyActionListener target="#{despesaBean.selected}"
                                                     value="#{item}" />

                    </p:commandButton>

                    <p:commandButton icon="ui-icon-close"   
                                     title="excluir despesa" 
                                     update=":formExclusaoDespesa"
                                     oncomplete="exclusaoDespesa.show()"> 

                        <f:setPropertyActionListener target="#{despesaBean.selected}"
                                                     value="#{item}" />

                    </p:commandButton>

                </p:column>

                <f:facet name="footer" >  

                    <div style="float: right">

                        Total:

                        <h:outputText value="#{despesaBean.total}" >

                            <f:convertNumber currencySymbol="R$"
                                             type="currency"
                                             locale="pt"/>

                        </h:outputText>

                    </div>

                    <br/>

                </f:facet>

            </p:dataTable>

        </p:panel>

    </h:form>

</ui:composition>

